<template>
  <div class="home">
    <div>
      <!-- <OSelect /> -->
      <EchartBar1
        v-bind="EchartBar1_Data"
        style="width: 400px; height: 300px"
      />
      <EchartBar2
        class="echart-bar-1"
        style="width: 400px; height: 300px"
      />
      <EchartBar3
        class="echart-bar-1"
        style="width: 400px; height: 300px"
      />
    </div>
    <div>
      <EchartBar4
        class="echart-bar-1"
        style="width: 400px; height: 300px"
        v-bind="EchartBar4_Data"
        @changeData="changeData"
      />
      <EchartPie1 class="echart-pie-1" />
      <EchartPie2 class="echart-pie-1" />
      <EchartPie3 class="echart-pie-1" />
    </div>
    <div>
      <EchartLine1 style="width: 400px; height: 300px" />
    </div>
    <div>
      <router-link to="/homeAnimate"><button>动画库</button></router-link>
    </div>
  </div>
</template>

<script>
// import OSelect from '@/views/common/o-select.vue'
import EchartBar1 from '@/views/common/echart-bar1.vue'
import EchartBar2 from '@/views/common/echart-bar2.vue'
import EchartBar3 from '@/views/common/echart-bar3.vue'
import EchartBar4 from '@/views/common/echart-bar4.vue'
import EchartPie1 from '@/views/common/echart-pie1.vue'
import EchartPie2 from '@/views/common/echart-pie2.vue'
import EchartPie3 from '@/views/common/echart-pie3.vue'
import EchartLine1 from '@/views/common/echart-line1.vue'
export default {
  components: {
    // OSelect,
    EchartBar1,
    EchartBar2,
    EchartBar3,
    EchartBar4,
    EchartPie1,
    EchartPie2,
    EchartPie3,
    EchartLine1
  },
  data () {
    return {
      timeStr: '',
      EchartBar4_Data: {
        xData: ['2017', '2018', '2019', '2020', '2021'],
        yData: [
          [1, 4, 8, 3, 4],
          [2, 4, 6, 4, 3],
          [20, 40, 80, 30, 40]
        ],
        actualData: [
          [1, 6, 8, 3, 4],
          [2, 4, 6, 4, 3]
        ],
        planData: [
          [1, 4, 8, 3, 4],
          [2, 4, 6, 4, 3]
        ],
        type: ['bar', 'bar', 'line'],
        // 可修改项
        lineColor: 'rgba(252, 169, 62, 1)',
        areaColor: [
          ['RGBA(18, 142, 232, 1)', 'RGBA(18, 142, 232, .3)'],
          ['rgba(25, 194, 147, 1)', 'rgba(25, 194, 147, .3)']
        ],
        color: [
          'RGBA(18, 142, 232, 1)',
          'rgba(25, 194, 147, 1)',
          'rgba(252, 169, 62, 1)'
        ],
        title: '',
        unit: '',
        legend: ['韩家', '孙家', '同比'],
        toolTip: {
          color: ''
        },
        contrast: true
      },
      EchartBar1_Data: {
        xData: ['2017', '2018', '2019', '2020', '2021'],
        yData: [
          [20, 40, 80, 30, 40],
          [20, 40, 80, 30, 40]
        ],
        type: ['bar', 'line'],
        lineColor: 'rgba(252, 169, 62, 1)',
        areaColor: {
          normal: [['RGBA(18, 142, 232, 1)', 'RGBA(18, 142, 232, .3)']],
          unique: [['rgba(25, 194, 147, 1)', 'rgba(25, 194, 147, .3)']]
        },
        color: ['RGBA(18, 142, 232, 1)', 'rgba(252, 169, 62, 1)'],
        title: '',
        unit: '',
        legend: ['资产数量', '同比'],
        toolTip: {}
      }
    }
  },
  mounted () { },
  methods: {
    changeData (index, planData, actualData) {
      this.EchartBar4_Data.xData[index] += '!'
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  .echart-pie-1 {
    width: 158px !important;
    height: 158px !important;
  }
}
</style>
